html, body
  font-size $font-size
  font-family $font-family

html, body, header, .view
  height 100%
  overflow-wrap break-word

body
  background-color $body-bg-color
  color $text-color

  a
    color $link-color
    text-decoration none
    cursor pointer
    transition-duration .2s
    transition-timing-function ease-in-out

    &:hover
      color $link-hover-color
      text-decoration none
      transition-duration .2s
      transition-timing-function ease-in-out

img[srcset]
  object-fit cover

.hover-with-bg
  display inline-block
  padding .45rem

  &:hover
    background-color $link-hover-bg-color
    transition-duration .2s
    transition-timing-function ease-in-out
    border-radius .15rem

.visitors
  font-size .8em
  padding .45rem
  float right

#board
  position relative
  margin-top -2rem
  background-color $board-bg-color
  border-radius 0.5rem
  z-index 3
  -webkit-box-shadow 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19)
  box-shadow 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19)

.view
  position relative
  overflow hidden
  cursor default

  .mask
    position absolute
    width 100%
    height 100%
    background-color rgba(0, 0, 0, 0.3)

.container-fluid
  padding-left 0
  padding-right 0

  .row
    margin-left 0
    margin-right 0

.flex-center
  display -webkit-box
  display -ms-flexbox
  display flex
  -webkit-box-align center
  -ms-flex-align center
  align-items center
  -webkit-box-pack center
  -ms-flex-pack center
  justify-content center
  height 100%

.white-text
  color #fff

.fadeInUp
  -webkit-animation-name fadeInUp
  animation-name fadeInUp

@media (max-width: 767px)
  header
    .h2
      font-size 1.5rem

  .nopadding-md
    padding-left 0 !important
    padding-right 0 !important

#local-search-result
  .search-list-title
    border-left 3px solid #0d47a1

  .search-list-content
    padding 0 1.25rem

.page-content, post-content
  strong
    font-weight bold

.copy-btn
  display inline-block
  cursor pointer
  border-radius .1rem
  border none
  background-color transparent
  -webkit-user-select none
  -moz-user-select none
  -ms-user-select none
  user-select none
  -webkit-appearance none
  font-size .75rem
  line-height 1
  font-weight bold
  outline none
  -webkit-transition opacity .2s ease-in-out
  -o-transition opacity .2s ease-in-out
  transition opacity .2s ease-in-out
  padding .25rem
  position absolute
  right .5rem
  top .25rem
  opacity 0

  & > i
    font-size .75rem
    font-weight 400

  & > span
    margin-left 5px

.copy-btn-dark
  color #6a737d

.copy-btn-light
  color #bababa

.markdown-body pre:hover > .copy-btn
  opacity 0.9

.markdown-body pre:hover > .copy-btn, .markdown-body pre:not(:hover) > .copy-btn
  outline none

.hidden-mobile
  display block

.visible-mobile
  display none

@media (max-width: 575px)
  .hidden-mobile
    display none

  .visible-mobile
    display block

.scroll-down-bar
  position absolute
  width 100%
  height 6rem
  text-align center
  cursor pointer
  bottom 0

  i
    font-size 2rem
    font-weight bold
    display inline-block
    position relative
    padding-top 2rem
    color #ff
    -webkit-transform translateZ(0)
    -moz-transform translateZ(0)
    -ms-transform translateZ(0)
    -o-transform translateZ(0)
    transform translateZ(0)
    -webkit-animation scroll-down 1.5s infinite
    animation scroll-down 1.5s infinite

#scroll-top-button
  position fixed
  background $board-bg-color
  border-radius 4px
  min-width 40px
  min-height 40px
  bottom -60px
  -webkit-transition bottom .3s ease
  -moz-transform bottom .3s ease
  -ms-transform bottom .3s ease
  -o-transform bottom .3s ease
  transition bottom .3s ease
  outline none
  display flex
  display -webkit-flex
  align-items center
  -webkit-box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
  box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)

  i
    font-size 1.75rem
    margin auto
    color $sec-text-color
    -webkit-transform translateZ(0)
    -moz-transform translateZ(0)
    -ms-transform translateZ(0)
    -o-transform translateZ(0)
    transform translateZ(0)

  &:hover i, &:active i
    -webkit-animation-name scroll-top
    animation-name scroll-top
    -webkit-animation-duration 1s
    animation-duration 1s
    -webkit-animation-delay .1s
    animation-delay .1s
    -webkit-animation-timing-function ease-in-out
    animation-timing-function ease-in-out
    -webkit-animation-iteration-count infinite
    animation-iteration-count infinite
    -webkit-animation-fill-mode forwards
    animation-fill-mode forwards
    -webkit-animation-direction alternate
    animation-direction alternate

.animated-icon
  width 30px
  height 20px
  position relative
  margin 0
  -webkit-transform rotate(0deg)
  -moz-transform rotate(0deg)
  -o-transform rotate(0deg)
  transform rotate(0deg)
  -webkit-transition .5s ease-in-out
  -moz-transition .5s ease-in-out
  -o-transition .5s ease-in-out
  transition .5s ease-in-out
  cursor pointer

  span
    display block
    position absolute
    height 3px
    width 100%
    border-radius 9px
    opacity 1
    left 0
    -webkit-transform rotate(0deg)
    -moz-transform rotate(0deg)
    -o-transform rotate(0deg)
    transform rotate(0deg)
    -webkit-transition .25s ease-in-out
    -moz-transition .25s ease-in-out
    -o-transition .25s ease-in-out
    transition .25s ease-in-out
    background #ffffff

    &:nth-child(1)
      top 0

    &:nth-child(2)
      top 10px

    &:nth-child(3)
      top 20px

  &.open
    span
      &:nth-child(1)
        top 11px
        -webkit-transform rotate(135deg)
        -moz-transform rotate(135deg)
        -o-transform rotate(135deg)
        transform rotate(135deg)

      &:nth-child(2)
        opacity 0
        left -60px

      &:nth-child(3)
        top 11px
        -webkit-transform rotate(-135deg)
        -moz-transform rotate(-135deg)
        -o-transform rotate(-135deg)
        transform rotate(-135deg)

.qr-trigger
  cursor pointer
  position relative

  &:hover .qr-img
    display block
    transition all .3s

.qr-img
  max-width 200px
  position absolute
  right -100px
  z-index 99
  display none
  box-shadow 0 0 20px -5px hsla(0, 0%, 62%, .2)

// Footer police 添加备案图标
a.beian-icp
  font-weight 300

a.beian-police
  position relative
  overflow hidden
  display inline-flex
  align-items center
  justify-content center

  img
    margin 0 3px
    width 18px
    height 18px

@media (max-width: 320px)
  a.beian-police
    span.beian-police-sep
      display none
